
page{
  height:100%
}

.container{
  background: #f1f1f1;
}
.material_library_detail_container{
    /* position: absolute; */
    left: 0;
    right: 0; 
    top: 0;
    bottom: 0;
    width: 100%;
    /* height: 100%; */
    background: #fff;
    overflow: hidden;
}
.material_library_detail_bg{
    position: fixed;
    top: 0;
    height: 167rpx;
    width: 100%;
    z-index: 10;
}
.back_page_icon{
    width: 40rpx;
    height: 40rpx;
    position: fixed;
    left: 20rpx;
}
.material_library_detail_title{
    position: absolute;
    left: 50%;
    width: 200rpx;
    margin-left: -100rpx;
    bottom: 20rpx;
    color: #606060;
    font-size: 34rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.material_library_detail_type_list{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 25rpx 0;
    position: fixed;
    top: 167rpx;
    width: 100%;
    background: #fff;
    z-index: 10;
}
.material_library_detail_type_item{
    position: relative;
    padding: 0 70rpx;
    font-weight: bold;
    border-left: 1rpx solid #aaaaaa;
    color: #8e8e8e;
}
.material_library_detail_type_item:first-child{
    border-left:none
}
.material_library_detail_type_item_text{
    padding-bottom: 6rpx;
}
.material_library_detail{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    flex-wrap: wrap;
    margin-top: 70rpx;
    padding-bottom: 100rpx;
}
.material_library_detail_item{
    width: 325rpx;
    position: relative;
    height: 540rpx;
    margin: 20rpx 0;
}
.material_library_detail_two{
    position: fixed;
    left: 0;
    right: 0; 
    top: 170rpx;
    bottom: 0;
    width: 100%;
    /* height: 100%; */
    background: #fff;
    overflow: hidden;
}
.material_library_detail_two_item{
    position: relative;
    width: 335rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.material_library_detail_item_three{
    position: relative;
    width: 260rpx;
    height: 550rpx;
    margin: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.material_library_detail_two_item_name{
    margin-top: 14rpx;
    font-size: 26rpx;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}
.material_library_detail_two_item_block{
    position: relative;
    width: 335rpx;
    height: 168rpx;
}
.material_library_detail_two_item_bg{
    width: 335rpx;
    height: 168rpx;
    position: absolute;
    z-index: 2;
}
.material_library_detail_two_item_play{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100rpx;
    height: 100rpx;
    margin-left: -50rpx;
    margin-top: -50rpx;
    z-index: 4;
}
.material_library_detail_item_img{
    width: 100%;
    height: 100%;
}
.video_blcok{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -128rpx;
    margin-top: -84rpx;
    width: 256rpx;
    height: 168rpx;
    z-index: 3;
}
.down_load_btn{
    position: absolute;
    bottom: 10rpx;
    left: 20rpx;
    /* width: 78rpx; */
    height: 38rpx;
    border-radius: 10rpx;
    background: #f8f8f7;
    font-size: 22rpx;
    color: #757575;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0rpx 20rpx;
    box-shadow: 0rpx 0rpx 16rpx #ccc;
}
.bottom_btn_blcok{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 0 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 10rpx #ccc;
    background: #fff;
    z-index: 11;
}
.bottom_btn_item_left{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.bottom_btn_item{
    border-radius: 40rpx;
    font-size: 26rpx;
    padding: 10rpx 25rpx;
    color: #333;
}
.select_block{
    position: absolute;
    left: 10rpx;
    top: 10rpx;
    z-index: 10;
}
.itemCheckbox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right:28rpx;
  width: 48rpx;
  height: 36rpx;
  }
/*没有相关商品  */
.noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-top: 500rpx;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
.file_preview_block{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.file_preview_bg{
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: #000;
   opacity: 0.8;
   z-index: 21;
}
.file_preview_ban{
    position: relative;
    width: 100%;
    z-index: 22;
}
.down_load_btn_block{
    position: relative;
    width: 100%;
    z-index: 22;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.down_load_btn_text{
    font-size: 24rpx;
    color: #fff;
    padding: 10rpx 30rpx;
    border-radius: 10rpx;
}
.material_library_detail_block{
    /* position: absolute; */
    left: 0;
    top: 167rpx;
    bottom: 0;
    display: flex;
    flex-direction: column;
    color: #777;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.material_library_detail_type_title{
    position: absolute;
    left: 0;
    top: 90rpx;
    bottom: 0;
    width:100%;
    height: 74rpx;
    background: #f4f4f4;
    font-weight: bold;
    font-size: 30rpx;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #777;
    overflow: hidden;
}
/* 左边的type */
.leftScrollType{
  position: absolute;
  left: 0;
  top: 170rpx;
  bottom: 100rpx;
  width:25%;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  font-size: xx-small;
  color: #777;
  overflow: hidden;
}
/* 右边的商品 */
.RightProductContainer{
  position: absolute;
  right: 0;
  top: 170rpx;
  bottom: 100rpx;
  width:74%;
  background: #f4f4f4;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: small;
  overflow: scroll;
  padding:0 10rpx;
  box-sizing:border-box;
}
.material_library_detail_left{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
    padding: 20rpx 0;
    font-size: 24rpx;
}
.active{
    width: 50rpx;
    height: 6rpx;
    border-radius: 30px;
    margin-top: 4rpx;

}